<template>
    <div class="account-container">
        <div class="account">
            <div class="select">
                <a href="" @click.prevent="comName='meituan'">美团账号登陆</a>
                <a href="" @click.prevent="comName='phone'">手机验证登录</a>
            </div>
            <div :class="comName=='phone'?'slidea':'slideb'"></div>
        </div>
        <div class="hr"></div>
        <div class="main">
            <transition >
                <MeiTuan v-if="comName=='meituan'"></MeiTuan>
                <phone v-else></phone>
            </transition>
        </div>
    </div>
</template>
<script>
import MeiTuan from '../me/MeiTuan.vue'
import Phone from '../me/Phone.vue'
export default {
    data(){
        return{
            comName:"meituan"
        }
    },
    created(){
        this.getStatus()
        this.$store.commit("changeTitle","我的")
    },
    methods:{
        getStatus(){
            if(this.$cookies.get('accoutCookie')){
                var val = this.$cookies.get('accoutCookie')
                this.$router.push({name:'order', params:{id:val}})
            }
        }
    },
    components:{
        MeiTuan,
        Phone
    }
}
</script>
<style lang="scss" scoped>
.v-enter{
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to{
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.v-enter-active,
.v-leave-active{
  transition: all 0.5s ease;
}
.account-container{
    .account{
        padding: 0 20px;
        .select{
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 50px;
            a{
                color: black;
            }
        }
        .slidea{
            width: 50%;
            height: 5px;
            background-color: red;
            transform: translateX(100%);
            transition-duration: 0.5s;
            z-index: 100;
        }
        .slideb{
            width: 50%;
            height: 5px;
            background-color: red;
            transform: translateX(0%);
            transition-duration: 0.5s;
            z-index: 100;
        }
    }
    .hr{
        width: 100%;
        height: 5px;
        background-color: lightgray;
        margin: -5px;
        opacity: 0.5;
    }
    .main{
        margin:10px; 
    }
}
</style>
